<template>
  <a-card>
    <div :class="advanced ? 'search' : null">
      <a-form layout="horizontal">
        <div :class="advanced ? null : 'fold'">
          <a-row>
            <a-col :md="6" :sm="24">
              <a-form-item
                label="设备"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-select placeholder="请选择">
                  <a-select-option
                    v-for="item in searchOptionsType"
                    :value="item.value"
                    :key="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item
                label="查询内容"
                :labelCol="{ span: 5 }"
                :wrapperCol="{ span: 18, offset: 1 }"
              >
                <a-input-number style="width: 100%" placeholder="请输入" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <span style="float: right; margin-top: 3px">
                <a-button type="primary">查询</a-button>
                <a-button style="margin-left: 8px">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </div>
      </a-form>
    </div>
    <a-divider></a-divider>
    <a-row :gutter="16">
      <a-col :span="4" v-for="tem in 12" :key="tem" class="colm">
        <a-card hoverable title="刀山" :bordered="false" class="antcard">
          <template class="txtc">
            <div style="text-align: center">
              <Icon class="aicon" type="fire" />
            </div>
          </template>
          <template #actions>
            <a>设置</a>
            <a>编辑</a>
            <a>使用记录</a>
          </template>
          <a-card-meta
            title="操作员：小鬼1号"
            description="已工作100年"
            class="actions"
          >
            <template> </template>
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import Icon from "ant-design-vue/es/icon";
export default {
  name: "ddevice",
  components: { Icon },
  data() {
    return {
      searchOptionsType: [
        { value: 0, label: "刀山" },
        { value: 1, label: "油锅" },
      ],
      deviceList: [
        {
          deviceName: "刀山",
          userName: "小鬼1号",
          discript: "已工作100年",
          start: "设备正常",
        },
      ],
    };
  },
  authorize: {
    deleteRecord: "delete",
  },
  methods: {},
};
</script>
 <style scoped>
.colm {
  margin: 10px 0 0 0;
}
.actions {
  margin: 15px 0 0 0;
}
.antcard {
  border: 1px solid #e6f0ec;
}
.txtc {
  text-align: center;
  margin: 10px;
  padding: 10px;
}
.aicon {
  text-align: center;
  font-size: 60px;
}
</style>